<template>
  <div class="job" slot="body">
    <Header></Header>

    <el-card class="box-card" id="hot_job">
      <el-row>
        <span>工作城市：</span>
        <el-tag style="font-size: 15px;margin-right: 5px">{{choose_city}}</el-tag>
        <el-button style="border: none" @click="choose_addr('全国')">全国</el-button>
        <el-button style="border: none" @click="choose_addr('北京市')">北京市</el-button>
        <el-button style="border: none" @click="choose_addr('上海市')">上海市</el-button>
        <el-button style="border: none" @click="choose_addr('广州市')">广州市</el-button>
        <el-button style="border: none" @click="choose_addr('深圳市')">深圳市</el-button>
        <el-button style="border: none" @click="choose_addr('杭州市')">杭州市</el-button>
        <el-button style="border: none" @click="choose_addr('天津市')">天津市</el-button>
        <el-button style="border: none" @click="choose_addr('厦门市')">厦门市</el-button>
        <el-button style="border: none" @click="choose_addr('重庆市')">重庆市</el-button>
        <el-button style="border: none" @click="to_area">更多<i class="el-icon-arrow-right"></i></el-button>
      </el-row>
      <el-row>
        <span>融资情况：</span>
        <el-tag style="font-size: 15px;margin-right: 5px">{{choose_financing}}</el-tag>
        <el-button style="border: none" @click="choose_finance('不限')">不限</el-button>
        <el-button style="border: none;" @click="choose_finance('未融资')">未融资</el-button>
        <el-button style="border: none" @click="choose_finance('天使轮')">天使轮</el-button>
        <el-button style="border: none" @click="choose_finance('A轮')">A轮</el-button>
        <el-button style="border: none" @click="choose_finance('B轮')">B轮</el-button>
        <el-button style="border: none" @click="choose_finance('C轮')">C轮</el-button>
        <el-button style="border: none" @click="choose_finance('D轮及以上')">D轮及以上</el-button>
        <el-button style="border: none" @click="choose_finance('已上市')">已上市</el-button>
        <el-button style="border: none" @click="choose_finance('无需融资')">无需融资</el-button>
      </el-row>
      <el-row>
        <span>公司规模：</span>
        <el-tag style="font-size: 15px;margin-right: 5px">{{choose_scale}}</el-tag>
        <el-button style="border: none">不限</el-button>
        <el-button style="border: none;">少于30人</el-button>
        <el-button style="border: none">30-99人</el-button>
        <el-button style="border: none">100-199人</el-button>
        <el-button style="border: none">200-499人</el-button>
        <el-button style="border: none">500人以上</el-button>
      </el-row>
      <el-row>
        <span>行业领域：</span>
        <el-tag style="font-size: 15px;margin-right: 5px">{{choose_industry}}</el-tag>
        <el-button style="border: none">不限</el-button>
        <el-button style="border: none;">互联网</el-button>
        <el-button style="border: none">制造业</el-button>
        <el-button style="border: none">服务业</el-button>
        <el-button style="border: none">电商</el-button>
        <el-button style="border: none">金融</el-button>
        <el-button style="border: none">其他<i class="el-icon-arrow-right"></i></el-button>
      </el-row>
    </el-card>

    <el-card class="box-card" id="hot_company">
      <el-row :gutter="12">
        <el-col :span="8" v-for="i in company_list" :key="i.id" class="text-card">
          <!--          {{i}}-->
          <el-card @click.native="company_detail(i.id)" style="cursor: pointer">
            <el-row>
              <el-col :span="10">
                <img :src="i.picture" :alt="i.picture" style="width: 100px;height: 100px">
              </el-col>
              <el-col :span="14">
                <el-row style="margin-bottom: 10px"><span style="font-size: 18px;color: #409EFF;">{{i.companyName}}</span>
                </el-row>
                <el-row><span style="color: #909399">{{i.financing}}|{{i.scale}}|{{i.industry}}</span></el-row>
                <el-row style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding-top: 5px">
                  {{i.remark}}
                </el-row>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-card>

    <el-pagination
      background
      layout="prev, pager, next"
      style="text-align: center;margin-top: 50px"
      :total="1000">
    </el-pagination>

    <Footer></Footer>
  </div>
</template>

<script>
  import Header from './Header'
  import Footer from './Footer'

  export default {
    name: 'Company',
    components: {Header, Footer},
    created () {
      var query = this.$route.query
      if (query.addr) {
        this.choose_city = query.addr
      } else {
        this.choose_city = '全国'
      }
      if (query.finance) {
        this.choose_financing = query.finance
      } else {
        this.choose_financing = '不限'
      }
      if (query.scale) {
        this.choose_scale = query.scale
      } else {
        this.choose_scale = '不限'
      }
      if (query.industry) {
        this.choose_industry = query.industry
      } else {
        this.choose_industry = '不限'
      }
      if (this.choose_financing === '不限') {
        this.$axios.post('http://localhost:8081/company/selectByCompany', {
          'status': 1,
          'auditStatus': 1
        }).then((res) => {
          const result = res.data
          this.company_list = result.data
        })
      } else {
        this.$axios.post('http://localhost:8081/company/selectByCompany', {
          'financing': this.choose_financing,
          'auditStatus': 1
        }).then((res) => {
          const result = res.data
          this.company_list = result.data
        })
      }
    },
    data () {
      return {
        choose_city: '',
        choose_financing: '',
        choose_scale: '',
        choose_industry: '',
        company_list: [],
      }
    },
    methods: {
      company_detail (id) {
        this.$router.push({path: 'company_detail', query: {id: id}})
      },
      to_area () {
        this.$router.push({path: 'area', query: {origin: 'company'}})
      },
      choose_addr (address) {
        this.choose_city = address
        this.$router.push({query: {addr: this.choose_city}})
      },
      choose_finance (financing) {
        this.choose_financing = financing
        this.$router.push({query: {finance: this.choose_financing}})
        this.$router.go(0)
        // setTimeout(() => {
        //   this.$router.go(0)
        // }, 1000)
      },
      // choose_addr (address) {
      //   this.choose_city = address
      //   this.$router.push({path: 'company', query: {addr: this.choose_city}})
      // },
      // choose_addr (address) {
      //   this.choose_city = address
      //   this.$router.push({path: 'company', query: {addr: this.choose_city}})
      // },
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .text-card {
    font-size: 15px;
    padding: 10px 0px;
  }
</style>
